<template>
  <div id="management-page" class="main-content">
    <!-- 顶部导航栏 -->
    <el-container>
      <el-main
        style="
          padding: 10px;
          background-color:#0c1e3e;
          height: 100vh;
        "
      >
        <!-- 搜索区域 -->
        <div
          class="search-section"
          style="
            margin-bottom: 20px;
            background: rgba(211, 232, 255, 0.8);
            padding: 15px;
            border-radius: 8px;
            border: 1px solid rgba(165, 208, 255, 0.5);
          "
        >
          <div
            class="search-header"
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 15px;
            "
          >
            <h2
              style="
                color: #0c1e3e;
                margin: 0;
                font-size: 18px;
                font-weight: 600;
              "
            >
              乡村特色产业社会化服务资源
            </h2>
            <el-button
              type="primary"
              icon="el-icon-plus"
              style="
                background: linear-gradient(
                  90deg,
                  rgba(0, 135, 255, 0.8),
                  rgba(90, 200, 250, 0.8)
                );
                border: 1px solid rgba(90, 200, 250, 0.5);
              "
              @click="addService"
            >
              添加服务资源
            </el-button>
          </div>
          <div
            class="search-filters"
            style="
              display: flex;
              align-items: center;
              gap: 10px;
              flex-wrap: wrap;
            "
          >
            <el-input
              placeholder="请输入主体名称"
              v-model="searchQuery"
              style="
                width: 200px;
                background: rgba(255, 255, 255, 0.8);
                border-color: rgba(165, 208, 255, 0.5);
              "
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="search"
              ></el-button>
            </el-input>
            <el-select
              v-model="selectedProvince"
              placeholder="请选择省"
              style="
                width: 120px;
                background: rgba(255, 255, 255, 0.8);
                border-color: rgba(165, 208, 255, 0.5);
              "
              @change="onProvinceChange"
            >
              <el-option label="全部" value=""></el-option>
              <el-option
                v-for="province in provinces"
                :key="province"
                :label="province"
                :value="province"
              ></el-option>
            </el-select>
            <el-select
              v-model="selectedCity"
              placeholder="请选择市"
              style="
                width: 120px;
                background: rgba(255, 255, 255, 0.8);
                border-color: rgba(165, 208, 255, 0.5);
              "
              @change="onCityChange"
            >
              <el-option label="全部" value=""></el-option>
              <el-option
                v-for="city in cities"
                :key="city.code"
                :label="city.name"
                :value="city.name"
              ></el-option>
            </el-select>
            <el-select
              v-model="selectedDistrict"
              placeholder="请选择区/县"
              style="
                width: 120px;
                background: rgba(255, 255, 255, 0.8);
                border-color: rgba(165, 208, 255, 0.5);
              "
            >
              <el-option label="全部" value=""></el-option>
              <el-option
                v-for="district in districts"
                :key="district.code"
                :label="district.name"
                :value="district.name"
              ></el-option>
            </el-select>
            <el-button
              @click="resetFilters"
              style="
                background: rgba(255, 255, 255, 0.8);
                border-color: rgba(165, 208, 255, 0.5);
                color: #0c1e3e;
              "
            >
              重置
            </el-button>
          </div>
        </div>

        <!-- 数据表格 -->
        <el-table
          :data="serviceResources"
          style="
            width: 100%;
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(165, 208, 255, 0.5);
          "
          header-row-class-name="table-header"
          row-class-name="table-row"
        >
          <el-table-column
            prop="id"
            label="序号"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="主体名称"
            min-width="150"
          ></el-table-column>
          <el-table-column
            prop="crop"
            label="服务作物"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="serviceType"
            label="服务类型"
            min-width="180"
          ></el-table-column>
          <el-table-column
            prop="province"
            label="服务省份"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="city"
            label="服务城市"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="district"
            label="服务区县"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="contactPerson"
            label="联系人"
            width="100"
          ></el-table-column>
          <el-table-column prop="status" label="状态" width="80" align="center">
            <template slot-scope="scope">
              <el-badge
                v-if="scope.row.status === '已认证'"
                :value="scope.row.status"
                type="success"
              />
              <el-badge
                v-else-if="scope.row.status === '待审核'"
                :value="scope.row.status"
                type="warning"
              />
              <el-badge
                v-else
                :value="scope.row.status"
                type="info"
                style="background: rgba(0, 135, 255, 0.8)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button
                @click="editService(scope.row)"
                type="text"
                size="small"
                style="color: #5ac8fa"
              >
                <i class="el-icon-edit"></i>
              </el-button>
              <el-button
                @click="deleteService(scope.row.id)"
                type="text"
                size="small"
                style="color: #ff4500"
              >
                <i class="el-icon-delete"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页控件 -->
        <div
          class="pagination"
          style="
            margin-top: 15px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
          "
        >
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalItems"
            style="color: #0c1e3e"
          >
          </el-pagination>
        </div>
      </el-main>
    </el-container>

    <!-- 编辑对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="50%"
      style="background: rgba(255, 255, 255, 0.95)"
      custom-class="custom-dialog"
    >
      <el-form :model="formData" label-width="100px" style="color: #0c1e3e">
        <el-form-item label="主体名称">
          <el-input
            v-model="formData.name"
            style="
              background: rgba(255, 255, 255, 0.8);
              border-color: rgba(165, 208, 255, 0.5);
            "
          ></el-input>
        </el-form-item>
        <el-form-item label="服务作物">
          <el-input
            v-model="formData.crop"
            style="
              background: rgba(255, 255, 255, 0.8);
              border-color: rgba(165, 208, 255, 0.5);
            "
          ></el-input>
        </el-form-item>
        <el-form-item label="服务类型">
          <el-input
            v-model="formData.serviceType"
            style="
              background: rgba(255, 255, 255, 0.8);
              border-color: rgba(165, 208, 255, 0.5);
            "
          ></el-input>
        </el-form-item>
        <el-form-item label="省份">
          <el-select
            v-model="formData.province"
            style="
              background: rgba(255, 255, 255, 0.8);
              border-color: rgba(165, 208, 255, 0.5);
            "
            @change="onFormProvinceChange"
          >
            <el-option label="请选择" value=""></el-option>
            <el-option
              v-for="province in provinces"
              :key="province"
              :label="province"
              :value="province"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市">
          <el-select
            v-model="formData.city"
            style="
              background: rgba(255, 255, 255, 0.8);
              border-color: rgba(165, 208, 255, 0.5);
            "
            @change="onFormCityChange"
          >
            <el-option label="请选择" value=""></el-option>
            <el-option
              v-for="city in formCities"
              :key="city.code"
              :label="city.name"
              :value="city.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区县">
          <el-select
            v-model="formData.district"
            style="
              background: rgba(255, 255, 255, 0.8);
              border-color: rgba(165, 208, 255, 0.5);
            "
          >
            <el-option label="请选择" value=""></el-option>
            <el-option
              v-for="district in formDistricts"
              :key="district.code"
              :label="district.name"
              :value="district.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input
            v-model="formData.contactPerson"
            style="
              background: rgba(255, 255, 255, 0.8);
              border-color: rgba(165, 208, 255, 0.5);
            "
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="formData.status"
            style="
              background: rgba(255, 255, 255, 0.8);
              border-color: rgba(165, 208, 255, 0.5);
            "
          >
            <el-option label="已认证" value="已认证"></el-option>
            <el-option label="待审核" value="待审核"></el-option>
            <el-option label="未认证" value="未认证"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="dialogVisible = false"
          style="
            background: rgba(255, 255, 255, 0.8);
            border-color: rgba(165, 208, 255, 0.5);
            color: #0c1e3e;
          "
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="saveForm"
          style="
            background: linear-gradient(
              90deg,
              rgba(0, 135, 255, 0.8),
              rgba(90, 200, 250, 0.8)
            );
            border: 1px solid rgba(90, 200, 250, 0.5);
          "
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getProvinces,
  getCitiesByProvince,
  getDistrictsByCity,
} from "@/assets/data/chinaRegions.js";

export default {
  name: "ManagementPage",
  data() {
    return {
      // 搜索条件
      searchQuery: "",
      selectedProvince: "",
      selectedCity: "",
      selectedDistrict: "",

      // 省市县数据
      provinces: [],
      cities: [],
      districts: [],

      // 表单中的省市县数据
      formCities: [],
      formDistricts: [],

      // 分页信息
      currentPage: 1,
      pageSize: 10,
      totalItems: 0,

      // 数据列表
      serviceResources: [],

      // 编辑对话框
      dialogVisible: false,
      dialogTitle: "编辑服务资源",
      isAdding: false,
      formData: {},
    };
  },
  mounted() {
    // 加载省份数据
    this.provinces = getProvinces();
    this.loadServiceResources();
  },
  methods: {
    // 加载服务资源数据
    loadServiceResources() {
      // 模拟从API获取数据
      // 实际项目中应该调用真实的API
      this.serviceResources = [
        {
          id: 1,
          name: "阆中市思依镇新思维经济联合社",
          crop: "水稻",
          serviceType: "翻犁、旋耕、代育秧、机插秧、飞防植保、旋耕培肥",
          province: "四川省",
          city: "南充市",
          district: "阆中市",
          contactPerson: "韩明恩",
          status: "已认证",
        },
        {
          id: 2,
          name: "阆中市东兴家庭农场",
          crop: "水稻",
          serviceType: "翻犁、旋耕、代育秧、飞防植保、收割、技术指导",
          province: "四川省",
          city: "南充市",
          district: "阆中市",
          contactPerson: "宋夏秋",
          status: "已认证",
        },
        {
          id: 3,
          name: "宿松县万胜生态种养殖专业合作社",
          crop: "小麦,水稻",
          serviceType: "旋耕、播种技术指导、旋耕机深松、飞防植保、收割",
          province: "安徽省",
          city: "安庆市",
          district: "宿松县",
          contactPerson: "高文万",
          status: "已认证",
        },
        {
          id: 4,
          name: "宿松县富民油茶专业合作社",
          crop: "茶叶",
          serviceType: "技术指导、机器（旱穴播、机械深施",
          province: "安徽省",
          city: "安庆市",
          district: "宿松县",
          contactPerson: "石学东",
          status: "已认证",
        },
        {
          id: 5,
          name: "宿松县源溪村长江家庭农场",
          crop: "茶叶",
          serviceType: "技术指导",
          province: "安徽省",
          city: "安庆市",
          district: "宿松县",
          contactPerson: "齐长江",
          status: "已认证",
        },
        {
          id: 6,
          name: "鄂尔多斯市星河农业专业合作社",
          crop: "玉米",
          serviceType: "修剪、植保、收购、烘干、除草、施肥",
          province: "内蒙古自治区",
          city: "鄂尔多斯市",
          district: "准格尔旗",
          contactPerson: "卢义军",
          status: "已认证",
        },
        {
          id: 7,
          name: "准格尔旗源牧种养殖专业合作社",
          crop: "玉米",
          serviceType: "旋耕、深耕、播种、收割、秸秆打捆",
          province: "内蒙古自治区",
          city: "鄂尔多斯市",
          district: "准格尔旗",
          contactPerson: "闫文光",
          status: "已认证",
        },
        {
          id: 8,
          name: "准格尔旗宏尔农机专业合作社",
          crop: "玉米",
          serviceType: "深耕、旋耕、播种、收割、秸秆打捆",
          province: "内蒙古自治区",
          city: "鄂尔多斯市",
          district: "准格尔旗",
          contactPerson: "刘换",
          status: "已认证",
        },
        {
          id: 9,
          name: "准格尔旗野腾农机专业合作社",
          crop: "玉米",
          serviceType: "旋耕、深耕、播种、收割、秸秆打捆",
          province: "内蒙古自治区",
          city: "鄂尔多斯市",
          district: "准格尔旗",
          contactPerson: "杨海兵",
          status: "已认证",
        },
        {
          id: 10,
          name: "准格尔旗迎农机站",
          crop: "玉米",
          serviceType: "深耕、旋耕、播种、收割、秸秆打捆",
          province: "内蒙古自治区",
          city: "鄂尔多斯市",
          district: "准格尔旗",
          contactPerson: "刘录",
          status: "已认证",
        },
      ];

      // 应用筛选条件
      let filteredData = this.serviceResources;

      // 按主体名称筛选
      if (this.searchQuery) {
        filteredData = filteredData.filter((item) =>
          item.name.includes(this.searchQuery)
        );
      }

      // 按省份筛选
      if (this.selectedProvince) {
        filteredData = filteredData.filter(
          (item) => item.province === this.selectedProvince
        );
      }

      // 按城市筛选
      if (this.selectedCity) {
        filteredData = filteredData.filter(
          (item) => item.city === this.selectedCity
        );
      }

      // 按区县筛选
      if (this.selectedDistrict) {
        filteredData = filteredData.filter(
          (item) => item.district === this.selectedDistrict
        );
      }

      this.serviceResources = filteredData;
      this.totalItems = filteredData.length;
    },

    // 搜索功能
    search() {
      this.currentPage = 1;
      this.loadServiceResources();
    },

    // 重置筛选条件
    resetFilters() {
      this.searchQuery = "";
      this.selectedProvince = "";
      this.selectedCity = "";
      this.selectedDistrict = "";
      this.cities = [];
      this.districts = [];
      this.currentPage = 1;
      this.loadServiceResources();
    },

    // 省份选择变化
    onProvinceChange(province) {
      this.selectedCity = "";
      this.selectedDistrict = "";
      this.districts = [];

      if (province) {
        this.cities = getCitiesByProvince(province);
      } else {
        this.cities = [];
      }

      this.loadServiceResources();
    },

    // 城市选择变化
    onCityChange(city) {
      this.selectedDistrict = "";

      if (city) {
        this.districts = getDistrictsByCity(city);
      } else {
        this.districts = [];
      }

      this.loadServiceResources();
    },

    // 表单中的省份选择变化
    onFormProvinceChange(province) {
      this.formData.city = "";
      this.formData.district = "";
      this.formDistricts = [];

      if (province) {
        this.formCities = getCitiesByProvince(province);
      } else {
        this.formCities = [];
      }
    },

    // 表单中的城市选择变化
    onFormCityChange(city) {
      this.formData.district = "";

      if (city) {
        this.formDistricts = getDistrictsByCity(city);
      } else {
        this.formDistricts = [];
      }
    },

    // 添加服务资源
    addService() {
      this.dialogTitle = "添加服务资源";
      this.isAdding = true;
      this.formData = {
        name: "",
        crop: "",
        serviceType: "",
        province: "",
        city: "",
        district: "",
        contactPerson: "",
        status: "待审核",
      };
      this.formCities = [];
      this.formDistricts = [];
      this.dialogVisible = true;
    },

    // 编辑服务资源
    editService(row) {
      // 深拷贝选中的行数据到表单
      this.dialogTitle = "编辑服务资源";
      this.isAdding = false;
      this.formData = JSON.parse(JSON.stringify(row));

      // 设置表单中的城市和区县数据
      if (this.formData.province) {
        this.formCities = getCitiesByProvince(this.formData.province);

        if (this.formData.city) {
          this.formDistricts = getDistrictsByCity(this.formData.city);
        }
      } else {
        this.formCities = [];
        this.formDistricts = [];
      }

      this.dialogVisible = true;
    },

    // 删除服务资源
    deleteService(id) {
      this.$confirm("确定要删除这条记录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "custom-confirm-dialog",
      })
        .then(() => {
          // 这里实现删除逻辑
          this.serviceResources = this.serviceResources.filter(
            (item) => item.id !== id
          );
          this.totalItems = this.serviceResources.length;
          this.$message({
            type: "success",
            message: "删除成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 保存表单
    saveForm() {
      // 这里实现保存逻辑
      if (this.isAdding) {
        // 添加新记录
        const maxId = Math.max(
          ...this.serviceResources.map((item) => item.id),
          0
        );
        this.formData.id = maxId + 1;

        // 构建完整地址
        this.formData.address = `${this.formData.province || ""}${
          this.formData.city
            ? (this.formData.province ? " " : "") + this.formData.city
            : ""
        }${
          this.formData.district
            ? (this.formData.city ? " " : "") + this.formData.district
            : ""
        }`;

        this.serviceResources.unshift(this.formData);
        this.$message({
          type: "success",
          message: "添加成功",
        });
      } else {
        // 更新现有记录
        const index = this.serviceResources.findIndex(
          (item) => item.id === this.formData.id
        );
        if (index !== -1) {
          // 构建完整地址
          this.formData.address = `${this.formData.province || ""}${
            this.formData.city
              ? (this.formData.province ? " " : "") + this.formData.city
              : ""
          }${
            this.formData.district
              ? (this.formData.city ? " " : "") + this.formData.district
              : ""
          }`;

          this.serviceResources.splice(index, 1, this.formData);
          this.$message({
            type: "success",
            message: "保存成功",
          });
        }
      }

      this.dialogVisible = false;
      this.loadServiceResources();
    },

    // 分页处理
    handleSizeChange(size) {
      this.pageSize = size;
      this.loadServiceResources();
    },

    handleCurrentChange(current) {
      this.currentPage = current;
      this.loadServiceResources();
    },
  },
};
</script>

<style scoped>
#management-page {
  font-family: "Microsoft YaHei", sans-serif;
  color: #0c1e3e;
  background-color: #0c1e3e;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(0, 135, 255, 0.1) 100%
  );
}

/* 表格样式 */
.table-header {
  background: rgba(18, 135, 255, 0.2);
  color: #0c1e3e;
}

.table-row {
  background: rgba(255, 255, 255, 0.7);
  color: #0c1e3e;
}

.el-table th,
.el-table td {
  border-bottom: 1px solid rgba(165, 208, 255, 0.5);
  color: #0c1e3e;
}

.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(18, 135, 255, 0.1);
}

/* 分页样式 */
.el-pagination button,
.el-pagination span {
  color: #0c1e3e;
}

.el-pagination button:hover {
  color: #0087ff;
}

.el-pagination .btn-prev:hover,
.el-pagination .btn-next:hover {
  color: #0087ff;
}

.el-pagination .active {
  background-color: #0087ff;
  color: #fff;
}

/* 对话框样式 */
.custom-dialog {
  background: rgba(255, 255, 255, 0.95);
  color: #0c1e3e;
}

.custom-dialog .el-dialog__header {
  background: linear-gradient(
    90deg,
    rgba(0, 135, 255, 0.8),
    rgba(90, 200, 250, 0.8)
  );
  color: white;
  border-radius: 8px 8px 0 0;
}

.custom-dialog .el-dialog__headerbtn .el-dialog__close {
  color: white;
}

.custom-dialog .el-dialog__title {
  color: #fff;
}

.custom-dialog .el-dialog__body {
  background: rgba(255, 255, 255, 0.95);
}

.custom-dialog .el-dialog__footer {
  background: rgba(240, 248, 255, 0.95);
  border-top: 1px solid rgba(165, 208, 255, 0.5);
  padding-top: 15px;
}

/* 确认对话框样式 */
.custom-confirm-dialog {
  background: rgba(255, 255, 255, 0.95);
  color: #0c1e3e;
}

.custom-confirm-dialog .el-message-box__title {
  color: #0c1e3e;
}

.custom-confirm-dialog .el-message-box__content {
  color: #0c1e3e;
}

/* 表单元素样式 - 与整体页面配色匹配 */
.el-input__inner,
.el-select .el-input__inner,
.el-textarea__inner {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(165, 208, 255, 0.5);
  color: #0c1e3e;
}

.el-input__inner:hover,
.el-select .el-input__inner:hover,
.el-textarea__inner:hover {
  border-color: rgba(18, 135, 255, 0.6);
}

.el-input__inner:focus,
.el-select .el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: #0087ff;
  box-shadow: 0 0 0 2px rgba(18, 135, 255, 0.2);
}

/* 下拉选择框的选项样式 */
.el-select-dropdown {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(165, 208, 255, 0.5);
}

.el-select-dropdown__item {
  color: #0c1e3e;
}

.el-select-dropdown__item:hover,
.el-select-dropdown__item.hover,
.el-select-dropdown__item.selected {
  background: rgba(18, 135, 255, 0.2);
  color: #0087ff;
}

/* 表单标签样式 */
.el-form-item__label {
  color: #0c1e3e;
}

/* 按钮样式优化 */
.el-button {
  transition: all 0.3s ease;
}

.el-button--primary {
  background: linear-gradient(
    90deg,
    rgba(0, 135, 255, 0.8),
    rgba(90, 200, 250, 0.8)
  );
  border: 1px solid rgba(90, 200, 250, 0.5);
  color: #fff;
}

.el-button--primary:hover,
.el-button--primary:focus {
  background: linear-gradient(
    90deg,
    rgba(0, 135, 255, 1),
    rgba(90, 200, 250, 1)
  );
  border-color: rgba(90, 200, 250, 0.8);
  color: #fff;
}

/* 图标颜色 */
.el-icon {
  color: #0c1e3e;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(211, 232, 255, 0.5);
}

::-webkit-scrollbar-thumb {
  background: rgba(18, 135, 255, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(18, 135, 255, 0.5);
}
</style>
